<template>
  <div class="advert">
    <el-card class="box-card">
      <template
        #header
        class="clearfix"
      >
        <el-button
          size="small"
          @click="$router.push({
            name: 'add-advertise'
          })"
        >
          添加广告位
        </el-button>
      </template>
      <el-table
        :data="adverts"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="spaceKey"
          label="spaceKey"
        />
        <el-table-column
          prop="name"
          label="广告位置名称"
        />
        <el-table-column
          prop="status"
          label="创建时间"
        >
          <template #default="{ row }">
            {{ formatDate(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="更新时间"
        >
          <template #default="{ row }">
             {{ formatDate(row.updateTime) }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120"
        >
          <template #default>
            <el-button
              size="mini"
              type="text"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, ref } from 'vue'
import { getAlladvertSpaces } from '/@/services/advertiseSpace'
import { formatDate } from '/@/utils/dayjs'
const useInit = () => {
  const adverts = ref([])
  const fetchList = async () => {
    const { data } = await getAlladvertSpaces()
    if (data.success) {
      adverts.value = data.content
    }
  }
  onBeforeMount(() => {
    fetchList()
  })
  return {
    adverts
  }
}
export default defineComponent({
  name: 'AdvertSpaceIndex',
  setup () {
    return {
      ...useInit(),
      formatDate
    }
  }
})
</script>